<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style >


  body {
    background-color:gainsboro;
    display: grid;
    place-content: center;
    height: 100vh;
    width: 100vw;
  }

  

.box{
  font-weight: bold;
  position: relative;

  /* 文本转大写 */
  text-transform: uppercase;
  font-size: 100px;
 }
  .box::after {
    /* 取属性值 */
    content: attr(data-content);
    /* content: 'houdunren'; */
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      to right,
      rgb(236, 72, 153),
      rgb(239, 68, 68),
      rgb(234, 179, 8)
    );

    /* 实现围绕文字裁剪，text属性只兼容chorme,所以要写兼容或者vue项目用postcss处理兼容 */
    background-clip: text;
    -webkit-background-clip: text;
    /* 原文文字要设置透明 */
    color: transparent;
    /* clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。 */
    /* ellipse(100px 100px at 0% 50%);裁减为一个椭圆，并且半径100,圆心 0% 50% */
    clip-path: ellipse(100px 100px at 0% 50%);
    animation: hd 3s ease-in infinite;
    text-transform: uppercase;
  }

  @keyframes hd {
    50% {
      clip-path: ellipse(100px 100px at 100% 50%);
    }
    to {
      clip-path: ellipse(100px 100px at 0% 50%);
    }
  }
    </style>
</head>
<body>
    <div class="box" data-content="thatshoulbbeme">thatshoulbbeme</div>

    
</body>
</html>